import { useEffect } from 'react'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import * as CANNON from 'cannon-es';
function App() {
    useEffect(() => {
        
        // 创建世界
        const scene = new THREE.Scene();
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 设置相机位置 
        camera.position.z = 4;
        camera.position.x = 4;


        // 创建物理世界
        const world = new CANNON.World();
        // 设置重力
        world.gravity.set(0, -9.82, 0); // m/s²

        // 添加圆球
        const sphereShape = new CANNON.Sphere(1);
        const sphereBody = new CANNON.Body({
            mass: 1, // 质量
            position: new CANNON.Vec3(0, 5, 0), // 初始位置
        });
        sphereBody.addShape(sphereShape);
        world.addBody(sphereBody);
        // 添加地面
        const groundShape = new CANNON.Box(new CANNON.Vec3(10, 0.1, 10));
        const groundBody = new CANNON.Body({
            mass: 0, // 质量为0表示静止物体
            position: new CANNON.Vec3(0, -1, 0), // 初始位置
        });
        groundBody.addShape(groundShape);
        world.addBody(groundBody);
        groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1); // 旋转角度
        
        // 创建圆球
        const geometry = new THREE.SphereGeometry(1, 32, 32);
        // 创建材质
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // 创建网格
        const cube = new THREE.Mesh(geometry, material);
        // 将网格添加到场景中
        scene.add(cube);

        // 创建平面
        const planeShape = new THREE.BoxGeometry(10, 0.1, 10);
        const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
        const plane = new THREE.Mesh(planeShape, planeMaterial);
        // 设置平面位置
        plane.position.y = -1;
        plane.rotation.x = 0.1; // 旋转平面
        // 将平面添加到场景中
        scene.add(plane);



        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 将渲染器添加到DOM中
        document.getElementById('app').appendChild(renderer.domElement);
        
        // 添加轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        
        // 创建动画函数
        const animate = function () {
            // 更新物理世界
            world.step(1 / 60); // 60fps
            // 更新圆球位置
            cube.position.copy(sphereBody.position);
            cube.quaternion.copy(sphereBody.quaternion);
            // 更新轨道控制器
            controls.update();


            requestAnimationFrame(animate);

            // 渲染场景
            renderer.render(scene, camera);
        };
        // 调用动画函数
        animate();


        return () => {
            // 清除渲染器
            renderer.dispose();
            // 清除场景
            scene.clear();
            // 清除相机
            camera.clear();
            // 清除渲染器DOM
            const app = document.getElementById('app');
            if (app) {
                app.removeChild(renderer.domElement);
            }

        }
    }, [])
    return (
        <div id='app'>

        </div>
    )
}

export default App
